<template>
  <div class="cnode-reply">
    <div class="cnode-reply-wrap">
      <header class="cnode-reply-header">
        <avatar :src="data.author.avatar_url"></avatar>
        <div class="cnode-reply-meta">
          <div class="cnode-reply-info">
            <span>{{ data.author.loginname }}</span>
            <div>
              发表于
              <timeago :since="data.create_at"></timeago>
            </div>
          </div>
          <div class="cnode-reply-actions">
            <span 
              class="action" 
              @click="up"
              :class="{'is-uped': data.is_uped}">
              <i class="iconfont icon-zan"></i>
              {{ data.ups.length }}
            </span>
            <span class="action" @click="reply">
              <i class="iconfont icon-pinglun3-copy"></i>
            </span>
          </div>
        </div>
      </header>
      <section class="cnode-reply-content markdown-body" v-html="data.content"></section>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import Avatar from '@/components/Avatar'
import Reply from '@/components/reply'
import post from '@/network/post'

export default {
  components: {
    Avatar
  },
  props: {
    data: {
      type: Object,
      default: Object
    },
    topicId: [Number, String]
  },
  computed: {
    ...mapState('appShell/common', ['userInfo'])
  },
  methods: {
    ...mapActions('detail', ['replyTo', 'upTo']),
    async reply() {
      if (!this.userInfo.accessToken) {
        this.$router.push('/login')
        return
      }
      const content = await Reply({
        content: `@${this.data.author.loginname} `
      })

      if (content) {
        this.replyTo({
          content: content,
          topicId: this.topicId,
          replyId: this.data.id
        })
      }
    },
    up() {
      if (!this.userInfo.accessToken) {
        this.$router.push('/login')
        return
      }
      this.upTo(this.data)
    }
  }
}
</script>
<style lang="scss" scoped>
$main-color: #1b76cf;
.cnode-reply-wrap {
  border-bottom: 1px solid #eee;
  padding-top: 10px;
}
.cnode-reply-header {
  display: flex;
  align-items: center;
}
.cnode-reply-meta {
  display: flex;
  justify-content: space-between;
  flex: 1;
  margin-left: 6px;
  font-size: 12px;
}
.cnode-reply-actions {
  display: flex;
  align-items: flex-end;
  font-size: 12px;
  .action {
    margin-left: 10px;
    &.is-uped {
      color: $main-color;
    }
  }
  .iconfont {
    font-size: 18px;
    &.active {
      color: $main-color;
    }
  }
}
.cnode-reply-content {
  margin-top: 10px;
}
</style>

